CHIMES · SEVEN BOARDS THAT HEAR ANY SONG
========================================

A chime is a small program: one HTML file holding a 9 x 9 board of little
machines that listens to a song and moves with it. Everything runs in your
own browser, from these files. Nothing is uploaded, nothing is installed.
Best in Chrome or Edge on a computer.

  IN    any song: an mp3, m4a, wav or mp4
  OUT   a take: the board and your song together, as an MP4 (or a WebM),
        in your Downloads

  THE PROCESS   load a song → the board listens and finds the beats →
                play: on the beats, rows and columns slide → TAKE records it


WHAT'S INSIDE
-------------

  the Arcade - hears any song.html          neon after closing (dark)
  Memphis 85 - hears any song.html          squiggles on cream (light)
  the Observatory - hears any song.html     a night on the roof (dark)
  Euclid by Day - hears any song.html       rhythm as geometry (light)
  the First Board - hears any song.html     where it began: fans, wheels, bars (dark)
  Ink and Paper - hears any song.html       drawn by hand, in code (light)
  the Reef - hears any song.html            coral and current (dark)


FOUR STEPS
----------

  1. Open a board. Press LOAD SONG and choose a song.
     The board listens first and finds the beats.

  2. Press PLAY and watch. Drag a row or a column of tiles with the mouse,
     like a puzzle cube, and the little machines answer.

  3. Press TAKE to record the whole song, board and sound, with half a
     second of silence at each end. REC records by hand: press it again
     to stop.

  4. For a montage, record the same song on two or three boards. Every take
     comes from the same sound, so they line up in your video editor.


UNDER THE HOOD
--------------

  - The picture: the Canvas 2D API, redrawn on every frame. Each tile is a
    small function that draws its machine from a few numbers.
  - The hearing: the Web Audio API. The song is decoded, mixed to mono and
    split into three bands. An onset is marked wherever a band jumps above
    its own recent average, and the onsets become the moves.
  - The recording: each frame is copied onto a 1080 x 1080 canvas and, with
    the song's sound, goes into a MediaRecorder.

No GIFs, no SVG, no image files, no libraries.

Made with Claude · by BeRogue · free to use and to learn from.
